<template>
  <div>
    <el-container>
      <el-header>创建你的Flag </el-header>

      <el-main>
        <el-row :gutter="20">
          <!-- -------------right------------------ -->
          <el-col :span="14"
            ><div class="grid-content bg-purple">
              <div style="height: 80px"></div>
              <div style="width: 50%">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="Flag名称">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>

                  <el-form-item label="Flag内容">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                  </el-form-item>
                  <el-form-item label="坚持天数">
                    <el-checkbox-group v-model="checkedCities" :max="1">
                      <el-checkbox
                        v-for="city in cities"
                        :label="city"
                        :key="city"
                        >{{ city }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="自定义：">
                    <el-input-number v-model="num" :step="1"></el-input-number>
                  </el-form-item>
                  <el-form-item label="Flag时间">
                    <el-col :span="11">
                      <el-date-picker
                        v-model="value1"
                        type="datetimerange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['12:00:00']"
                      >
                      </el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                  </el-form-item>
                  <el-form-item label="挑战金额">
                    <el-input-number v-model="num" :step="1"></el-input-number>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit"
                      >立即创建</el-button
                    >
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div></el-col
          >
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
const cityOptions = ["10天", "15天", "20天", "30天"];
export default {
  data() {
    return {
      //   --------------自定义--------------------
      num: 1,
      //  ----------------选择框-----------------------
      checkedCities: [],
      cities: cityOptions,
      //   ---------------------------------------
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      // ------------------------------------------
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // -----------------时间-------------------------
      value1: "",
      value2: "",

      //-----------------------------------------


    };
  },
  watch: {
    num(newName, oldName) {
      if (this.num < 0) {
        alert("挑战金额最小值不能为0");
        this.num = newName == 0;
      }
      if (this.num > 100) {
        alert("挑战金额最大值不能超过100");
        this.num = newName == 100;
      }
    },
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style scoped>
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 640px !important;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  margin-top: -55px;
  
}
</style>